<template>
  <div id="keFenhong">
    <c-title :hide="false" text="转账"></c-title>
    <div class="background_box1"></div>
    <div class="contenbox">
      <!-- 列表 -->
      <div class="integralList">
        <div class="title">转账列表</div>
        <div class="list" v-for="(item, ind) in list" :key="ind">
          <div class="li_le">
            <div class="name">{{ item.title }}</div>
            <div class="name">下级id{{ item.uid }}</div>
            <div class="time">{{ item.created_at }}</div>
          </div>
          <div class="li_ri">
            <div v-if="item.status == 0" class="te" @click="openPopup(item)">转账</div>
            <div v-if="item.status == 1" class="te-da" >待确认</div>
            <div v-if="item.status == 2" class="te-ed" >已确认</div>
          </div>
        </div>
      </div>
    </div>
    <!-- -->
    <!-- 换牛二期-88-转账弹窗 -->
    <van-popup v-model="transferPop" position="center" :overlay="true" round :close-on-click-overlay="false">
      <div class="popup">
        <div class="popup-con">
          <div class="popup-title1">本次转账您获得{{ money }}余额</div>
          <div>
            <input type="number" @input="niuUidChange" class="popup-title2" placeholder="请输入换牛科技ID号" v-model="niuUid">
          </div>
          <!-- <div class="popup-title2">转出换牛id{{ niuUid }}</div> -->
          <div class="popup-title3">转出牛证：{{ niuzheng }}</div>
          <div class="popup-title3">牛证手续费：{{ niuzhengShouxu }}</div>
          <div class="popup-title3">转出换货值：{{ huanhuo }}</div>
          <div class="popup-title3">现金手续费：{{ moneyShouxu }}</div>
        </div>
        <div class="bottom-btn" style="height: 50px; display: flex; width: 100%; border-top: 1px solid #eaeaea">
          <div @click="cancelPop" class="cancel-btn" style="">取消</div>
          <div @click="confirmPop" class="confirm-btn" style="">确定</div>
        </div>
      </div>
    </van-popup>
  </div>
</template>
  
  
      
      <script>
import transferController from "./transferController";

export default transferController;
</script>
     <style lang="scss" scoped>
.background_box1 {
  color: #382c0a;
  background-color: #fff;
  background-image: -webkit-gradient(linear, left top, left bottom, from(var(--themeBaseColor)), to(#f5f5f5));
  background-image: -webkit-linear-gradient(var(--themeBaseColor), #f5f5f5);
  background-image: linear-gradient(var(--themeBaseColor), #f5f5f5);
  min-height: 9.125rem;
  padding: 1.5938rem 1.0938rem 0 1.0938rem;
}
.contenbox {
  padding: 0 0.625rem;
  margin-top: -8rem;
  padding-bottom: 1rem;
}
/* 顶部 */
.topMy {
  height: 5.125rem;
  background: #fff;
  border-radius: 0.625rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 0 1rem;
  .left {
    text-align: left;
    .txt {
      font-size: 0.75rem;
      color: #666666;
    }
    .price {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      font-size: 1.5rem;
      img {
        margin-bottom: 0.25rem;
        margin-left: 0.25rem;
        width: 1rem;
        height: 1rem;
      }
    }
  }
}

/* 列表 */
.integralList {
  margin-top: 0.5rem;
  padding: 1rem;
  border-radius: 0.625rem;
  background: #fff;
}
.title {
  font-size: 1rem;
  font-weight: bold;
  color: #333333;
  text-align: left;
  margin-bottom: 1rem;
}
.list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1rem;
}
.li_le {
  text-align: left;
}
.name {
  font-weight: 500;
  color: #333333;
  font-size: 0.9125rem;
  margin-bottom: 0.5rem;
}
.time {
  font-size: 0.75rem;
  color: #999999;
  font-weight: 400;
}
.price {
  font-size: 0.875rem;
  color: #f20606;
}
.te {
  margin-right: 0.5rem;
  width: 60px;
  height: 30px;
  background: #fd0000;
  border-radius: 8px;
  line-height: 30px;
  text-align: center;
  color: #fff;
}
.te-da {
  margin-right: 0.5rem;
  width: 60px;
  height: 30px;
  background: #9cbc01;
  border-radius: 8px;
  line-height: 30px;
  text-align: center;
  color: #fff;
}
.te-ed {
  margin-right: 0.5rem;
  width: 60px;
  height: 30px;
  background: #656565;
  border-radius: 8px;
  line-height: 30px;
  text-align: center;
  color: #fff;
}

.li_ri {
  display: flex;
  align-items: center;
}
.popup {
  width: 280px;
  height: 300px;
  border-radius: 20px;
  position: relative;
}
.popup-con {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 30px;
}
.popup-title1 {
  font-size: 18px;
  color: #333;
  font-weight: 500;
  margin-top: 20px;
}
.popup-title2 {
  font-size: 14px;
  color: #333;
  font-weight: 500;
  margin: 8px 0;
  border: 1px solid #efefef;
  height: 40px;
  border-radius: 8px;
  text-align: center;
}
.popup-title3 {
  font-size: 16px;
  color: #333;
  font-weight: 500;
  width: 70%;
  display: flex;
  justify-content: flex-start;
  margin-top: 8px;
}
.bottom-btn {
  position: absolute;
  left: 0;
  bottom: 1px;
}
.cancel-btn {
  width: 50%;
  text-align: center;
  line-height: 50px;
  border-right: 1px solid #eaeaea;
}
.confirm-btn {
  width: 50%;
  text-align: center;
  line-height: 50px;
  color: #f0a367;
}
</style>